<template>
  <div class="home">
    <el-container class="layout-container">
      <!-- 头部 -->
      <el-header class="app-header">
        <div class="header-content">
          <h1 class="header-title">企业访客登记系统</h1>
        </div>
      </el-header>

      <!-- 主体内容 -->
      <el-main class="app-main">
        <div class="main-container">
          <!-- 功能卡片 -->
          <el-row :gutter="20" class="action-cards">
            <el-col :xs="24" :sm="8" :md="8">
              <el-card class="action-card" shadow="hover" @click="goToVisitorRegister">
                <div class="card-content">
                  <el-icon class="card-icon" :size="48" color="#67C23A">
                    <EditPen />
                  </el-icon>
                  <h3 class="card-title">访客登记</h3>
                  <p class="card-description">扫码登记来访信息</p>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="8" :md="8">
              <el-card class="action-card" shadow="hover" @click="goToVisitorStatus">
                <div class="card-content">
                  <el-icon class="card-icon" :size="48" color="#E6A23C">
                    <Search />
                  </el-icon>
                  <h3 class="card-title">通行码查询</h3>
                  <p class="card-description">查看通行码状态</p>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="8" :md="8">
              <el-card class="action-card" shadow="hover" @click="goToAdmin">
                <div class="card-content">
                  <el-icon class="card-icon" :size="48" color="#409EFF">
                    <Setting />
                  </el-icon>
                  <h3 class="card-title">管理后台</h3>
                  <p class="card-description">审核访客信息</p>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 二维码区域 -->
          <el-card class="qr-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">访客登记二维码</span>
              </div>
            </template>
            <div class="qr-content">
              <div class="qr-placeholder">
                <div class="qr-code">
                  <el-icon class="qr-icon" :size="80" color="#909399">
                    <Grid />
                  </el-icon>
                  <p class="qr-text">访客登记二维码</p>
                </div>
              </div>
              <p class="qr-tip">外来人员请扫描此二维码进行登记</p>
            </div>
          </el-card>
        </div>
      </el-main>

      <!-- 底部 -->
      <el-footer class="app-footer">
        <div class="footer-content">
          <p>&copy; 2025 企业访客登记系统 - 安全第一</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { User, EditPen, Search, Setting, Grid } from "@element-plus/icons-vue";

const router = useRouter();

const goToVisitorStatus = () => {
  router.push("/visitor-status");
};

const goToVisitorRegister = () => {
  router.push({
    path: "/visitor-register",
    query: {
      QYBH: "65ad7a5723244a13a1703c134b1bb627",
      WXID: "666555",
      QYMC: "相城光辉芯片制造有限公司",
    },
  });
};

const goToAdmin = () => {
  router.push("/admin");
};
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.layout-container {
  min-height: 100vh;
}

.app-header {
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.header-content {
  text-align: center;
}

.header-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.app-main {
  padding: 2rem 0;
  background: #f5f7fa;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.welcome-card {
  margin-bottom: 2rem;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #303133;
}

.welcome-content {
  padding: 2rem 0;
}

.welcome-icon {
  margin-bottom: 1rem;
}

.welcome-text {
  font-size: 1.1rem;
  color: #606266;
  margin: 0;
}

.action-cards {
  margin-bottom: 2rem;
}

.action-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  height: 100%;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.card-content {
  text-align: center;
  padding: 2rem 1rem;
}

.card-icon {
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.5rem;
  color: #303133;
  margin-bottom: 0.5rem;
}

.card-description {
  color: #606266;
  line-height: 1.5;
  margin: 0;
}

.qr-card {
  text-align: center;
}

.qr-content {
  padding: 1rem 0;
}

.qr-placeholder {
  display: inline-block;
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.qr-code {
  width: 200px;
  height: 200px;
  background: white;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.qr-icon {
  margin-bottom: 1rem;
}

.qr-text {
  font-size: 0.9rem;
  margin: 0;
}

.qr-tip {
  color: #606266;
  font-size: 0.9rem;
  margin: 0;
}

.app-footer {
  background: #303133;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.footer-content {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    padding: 0 15px;
  }

  .header-title {
    font-size: 2rem;
  }

  .header-subtitle {
    font-size: 1rem;
  }

  .action-cards .el-col {
    margin-bottom: 1rem;
  }

  .card-content {
    padding: 1.5rem 1rem;
  }

  .qr-code {
    width: 150px;
    height: 150px;
  }
}
</style>
